<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>宁波市重点人才工程驾驶仓</title>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
    <script src="./main.js"></script>
    <script src="./svg/svg.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="stylesheet" type="text/css" href="./svg/svg.css">
	<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<section class="screen" id="main">
    <section class="header">
        <div class="title-left">
            宁波市甬江引才工程
        </div>
        <img src="./img/header-txt.png"/>
        <div class="screen-menu">
            <span class="menu-item active">2020批次</span>
            <span class="menu-item">2021批次</span>
            <span class="menu-item">2022批次</span>
        </div>
    </section>

    <section class="main">
        <section class="left flex-v">
            <section class="left-top">
                <div class="block">
                    <div class="block-title flex-betw">
                        <span class="title-text">项目实况</span>
                        <span class="detail-btn">查看详情</span>
                    </div>
                    <div class="block-content flex-v">
                        <div class="pie flex-v">
                            <div class='pie-title' style="display: none;">
                                科技创新领域
                                <span class="pie-title-value">
                                        234452
                                        <label class="unit">项</label>
                                    </span>
                            </div>
                            <div class="pie-content flex1" id="pieEl"></div>
                        </div>
                        <div class="bar" id="barEl"></div>
                    </div>
                </div>
            </section>
            <section class="left-middle">
                <div class="block">
                    <div class="block-title flex-betw">
                        <span class="title-text">项目跟踪情况</span>
                        <span class="detail-btn">查看详情</span>
                    </div>
                    <div class="block-content flex-betw flex-w">
                        <div class="item1">
                            <div class="item1__label"><i class="fa fa-bar-chart"></i>入选总数</div>
                            <div><span class="item1__num">12818</span><span style="font-size: 10px;">个</span></div>
                        </div>
                        <div class="item1">
                            <div class="item1__label"><i class="fa fa-bookmark"></i>立项数</div>
                            <div><span class="item1__num">12818</span><span style="font-size: 10px;">个</span></div>
                        </div>
                        <div class="item1">
                            <div class="item1__label"><i class="fa fa-users"></i>未申领</div>
                            <div><span class="item1__num">12818</span><span style="font-size: 10px;">个</span></div>
                        </div>
                        <div class="split-line"></div>
                        <!--
                        <div class="item1">
                            <div class="item1__label"><i class="fa fa-circle"></i>一期已申领</div>
                            <div><span class="item1__num">12818</span><span style="font-size: 10px;">个</span></div>
                        </div>
                        <div class="item1">
                            <div class="item1__label"><i class="fa fa-circle-o"></i>一期申领中</div>
                            <div><span class="item1__num">12818</span><span style="font-size: 10px;">个</span></div>
                        </div>
                        <div class="item1">
                            <div class="item1__label"><i class="fa fa-circle"></i>结题数</div>
                            <div><span class="item1__num">12818</span><span style="font-size: 10px;">个</span></div>
                        </div>
                        <div class="split-line"></div>
                    -->
                        <div class="item1">
                            <div class="item1__label"><i class="fa fa-check"></i>二期已申领</div>
                            <div><span class="item1__num">12818</span><span style="font-size: 10px;">个</span></div>
                        </div>
                        <div class="item1">
                            <div class="item1__label"><i class="fa fa-clock-o"></i>二期申领中</div>
                            <div><span class="item1__num">12818</span><span style="font-size: 10px;">个</span></div>
                        </div>
                        <div class="item1">
                            <div class="item1__label"><i class="fa fa-circle"-o></i>中止中</div>
                            <div><span class="item1__num">12818</span><span style="font-size: 10px;">个</span></div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="left-bottom">
                <div class="block">
                    <div class="block-title flex-betw">
                        <span class="title-text">资金管理情况</span>
                        <span class="detail-btn">查看详情</span>
                    </div>
                    <div class="block-content flex-betw flex-w">
                        <div class="item2">
                            <div class="item2__label">总拨付款</div>
                            <div><span class="item2__num">5000000</span></div>
                        </div>
                        <div class="item2">
                            <div class="item2__label">未申领</div>
                            <div><span class="item2__num">359100</span></div>
                        </div>
                        <div class="item2">
                            <div class="item2__label">一期已申领</div>
                            <div><span class="item2__num">9600000</span></div>
                        </div>
                        <div class="item2">
                            <div class="item2__label">一期申领中</div>
                            <div><span class="item2__num">250000</span></div>
                        </div>
                        <div class="item2">
                            <div class="item2__label">二期已申领</div>
                            <div><span class="item2__num">103600</span></div>
                        </div>
                        <div class="item2">
                            <div class="item2__label">二期申领中</div>
                            <div><span class="item2__num">1105000</span></div>
                        </div>
                    </div>
                </div>
            </section>
        </section>
        <section class="right flex-v">
            <section class="right-top">
                <div class="block">
                    <div class="block-title flex-betw">
                        <span class="title-text">企业员工数</span>
                        <span class="detail-btn">查看详情</span>
                    </div>
                    <div class="block-content flex-betw">
                        <div class="item3 flex-vc">
                            <div class="item3__label">100人以下</div>
                            <div><span class="item3__num">756</span><span style="font-size: 12px;">家</span></div>
                        </div>
                        <div class="item3 flex-vc">
                            <div class="item3__label"><i></i>100-500人</div>
                            <div><span class="item3__num">756</span><span style="font-size: 12px;">家</span></div>
                        </div>
                        <div class="item3 flex-vc">
                            <div class="item3__label"><i></i>500-1000人</div>
                            <div><span class="item3__num">756</span><span style="font-size: 12px;">家</span></div>
                        </div>
                        <div class="item3 flex-vc">
                            <div class="item3__label"><i></i>1000人以上</div>
                            <div><span class="item3__num">756</span><span style="font-size: 12px;">家</span></div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="right-middle1">
                <div class="block">
                    <div class="block-title flex-betw">
                        <span class="title-text">企业营收额</span>
                        <span class="detail-btn">查看详情</span>
                    </div>
                    <div class="block-content" id="company"></div>
                </div>
            </section>
            <section class="right-middle2">
                <div class="block">
                    <div class="block-title flex-betw">
                        <span class="title-text">响应情况</span>
                        <span class="detail-btn">查看详情</span>
                    </div>
                    <div class="block-content">
                        <div class="first flex-betw">
                            <div class="icon-text flex-c">
                                <div class="first-icon"></div>
                                <div class="orgName">海曙区人社局</div>
                            </div>
                            <div class="progress flex-c">
                                <span>响应率</span>
                                <div class="p-bg">
                                    <div class="p-con" style="width: 97%;background-color: #07e10c;"></div>
                                </div>
                                <span class="p-per">97%</span>
                            </div>
                            <div class="arrow-up"></div>
                        </div>
                        <div class="second flex-betw">
                            <div class="icon-text flex-c">
                                <div class="second-icon"></div>
                                <div class="orgName">鄞州区科技局</div>
                            </div>
                            <div class="progress flex-c">
                                <span>响应率</span>
                                <div class="p-bg">
                                    <div class="p-con" style="width: 82%;background-color: #60c1ff;"></div>
                                </div>
                                <span class="p-per">82%</span>
                            </div>
                            <div class="arrow-up"></div>
                        </div>
                        <div class="third flex-betw">
                            <div class="icon-text flex-c">
                                <div class="third-icon"></div>
                                <div class="orgName">北仑区组织部</div>
                            </div>
                            <div class="progress flex-c">
                                <span>响应率</span>
                                <div class="p-bg">
                                    <div class="p-con" style="width: 75%;background-color: #60c1ff;"></div>
                                </div>
                                <span class="p-per">75%</span>
                            </div>
                            <div class="arrow-up"></div>
                        </div>
                        <div class="otherRank flex-betw">
                            <div class="icon-text flex-c">
                                <div class="otherRank-icon"></div>
                                <div class="orgName">市科技局</div>
                            </div>
                            <div class="progress flex-c">
                                <span>响应率</span>
                                <div class="p-bg">
                                    <div class="p-con" style="width: 74%;background-color: #60c1ff;"></div>
                                </div>
                                <span class="p-per">74%</span>
                            </div>
                            <div class="arrow-down"></div>
                        </div>
                        <div class="otherRank flex-betw">
                            <div class="icon-text flex-c">
                                <div class="otherRank-icon"></div>
                                <div class="orgName">市农林局</div>
                            </div>
                            <div class="progress flex-c">
                                <span>响应率</span>
                                <div class="p-bg">
                                    <div class="p-con" style="width: 40%;background-color: #e1073f;"></div>
                                </div>
                                <span class="p-per">40%</span>
                            </div>
                            <div class="arrow-up"></div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="right-bottom">
                <div class="block">
                    <div class="block-title flex-betw">
                        <span class="title-text">异常情况</span>
                        <span class="detail-btn">查看详情</span>
                    </div>
                    <div class="block-content">
                        <table>
                            <tr class="table-header">
                                <td>序号</td>
                                <td>IP地址</td>
                                <td>来自</td>
                                <td>访问时间</td>
                            </tr>
                            <tr class="table-tr">
                                <td>01</td>
                                <td>207.226.141.205</td>
                                <td>美国</td>
                                <td>2021.02.12 16:00:00</td>
                            </tr>
                            <tr class="table-tr">
                                <td>02</td>
                                <td>207.226.141.205</td>
                                <td>美国</td>
                                <td>2021.02.12 16:00:00</td>
                            </tr>
                            <tr class="table-tr">
                                <td>03</td>
                                <td>207.226.141.205</td>
                                <td>美国</td>
                                <td>2021.02.12 16:00:00</td>
                            </tr>
                            <tr class="table-tr">
                                <td>04</td>
                                <td>207.226.141.205</td>
                                <td>美国</td>
                                <td>2021.02.12 16:00:00</td>
                            </tr>
                            <tr class="table-tr">
                                <td>05</td>
                                <td>207.226.141.205</td>
                                <td>美国</td>
                                <td>2021.02.12 16:00:00</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </section>
        </section>
        <section class="middle">
            <div class="block">
                <div class="year-sel">
                    <span class="sel-btn">2020批次</span>
                    <span class="sel-btn active">2021批次</span>
                </div>
                <div class="card-left">
                    <div class="p-total">
                        <div class="p-total__label">
                            <span class="m-label">申报项目</span>
                        </div>
                        <div class="p-total__num" style="color: #0096ff;">
                            <span class="number-large">5,580</span>
                        </div>
                        <div class="p-total__end"></div>
                    </div>

                    <div class="t-new">
                        <div class="t-new__label"><span class="m-label">人才总数</span></div>
                        <div class="t-new__num" style="color: #f6ff00;">
                            <span class="number-large">5,312</span>
                        </div>
                        <div class="t-new__end"></div>
                    </div>
                </div>
                <div class="card-right">
                    <div class="c-company flex-vr">
                        <div class="c-company__label"><span class="m-label">入选项目</span></div>
                        <div class="c-company__num" style="color: #f6ff00;">
                            <span class="number-large">5,312</span>
                        </div>
                        <div class="c-company__end"></div>
                    </div>
                    <div class="m-new flex-vr">
                        <div class="m-new__label"><span class="m-label">落户项目</span></div>
                        <div class="m-new__num" style="color: #ff4747;">
                            <span class="number-large">5,312</span>
                        </div>
                        <div class="m-new__end"></div>
                    </div>
                </div>

                <div id="svg-wrap" class="svg-wrap">
                    <embed id="embed" class="svg-embed" src="./svg/ninbo2.svg" type="image/svg+xml" />
                </div>
            </div>
            <div class="middle-left">
                <div class="p-total">
                    <div class="p-total__label">
                        <span class="m-label">项目总数</span>
                    </div>
                    <div class="p-total__num" style="color: #0096ff;">
                        <span class="number-large">5,580</span>
                    </div>
                    <div class="p-total__end"></div>
                </div>
                <div class="t-new">
                    <div class="t-new__label"><span class="m-label">今日新增</span></div>
                    <div class="t-new__num" style="color: #f6ff00;">
                        <span class="number-large">196</span>
                        <span class="number-else">(项目)</span>
                    </div>
                    <div class="t-new__end" style="margin-bottom: 10px;"></div>
                    <div class="t-new__num" style="color: #f6ff00;">
                            <span class="number-large">8</span>
                            <span class="number-else">(人才)</span>
                        </div>
                        <div class="t-new__end"></div>
                </div>
                <div class="r-total">
                    <div class="r-total__label"><span class="m-label">人才总数</span></div>
                    <div class="r-total__num" style="color: #ff4747;">
                        <span class="number-large">187,542</span>
                    </div>
                    <div class="r-total__end"></div>
                </div>
            </div>
            <div class="middle-right" style="display: none">
                    <div class="l-company flex-vr">
                        <div class="l-company__label">
                            <span class="m-label">落户企业</span>
                        </div>
                        <div class="l-company__num" style="color: #0096ff;">
                            <span class="number-large">6,212</span>
                            <span class="number-else">(创业)</span>
                        </div>
                        <div class="l-company__end" style="margin-bottom: 10px;"></div>
                        <div class="l-company__num" style="color: #0096ff;">
                            <span class="number-large">121</span>
                            <span class="number-else">(创新)</span>
                        </div>
                        <div class="l-company__end"></div>
                    </div>
                    <div class="c-company flex-vr">
                        <div class="c-company__label"><span class="m-label">创办企业</span></div>
                        <div class="c-company__num" style="color: #f6ff00;">
                            <span class="number-large">312</span>
                            <span class="number-else"></span>
                        </div>
                        <div class="c-company__end"></div>
                    </div>
                    <div class="m-new flex-vr">
                        <div class="m-new__label"><span class="m-label">当月新增</span></div>
                        <div class="m-new__num" style="color: #ff4747;">
                            <span class="number-large">0</span>
                            <span class="number-else"></span>
                        </div>
                        <div class="m-new__end"></div>
                    </div>
            </div>
        </section>
    
        <section class="bars">
            <div class="bar-item">
                <div class="bar-item-num">12</div>
                <div class="bar-item-bottom">宁波大学</div>
            </div>
            <div class="bar-item">
                <div class="bar-item-num">12</div>
                <div class="bar-item-bottom">浙江万里学院</div>
            </div>
            <div class="bar-item">
                <div class="bar-item-num">12</div>
                <div class="bar-item-bottom">中国兵器科学研究院</div>
            </div>
            <div class="bar-item">
                <div class="bar-item-num">12</div>
                <div class="bar-item-bottom">中国科学宁波材料与工程研究所</div>
            </div>
            <div class="bar-item">
                <div class="bar-item-num">12</div>
                <div class="bar-item-bottom">宁波红鹰学院</div>
            </div>
            <div class="bar-item">
                <div class="bar-item-num">12</div>
                <div class="bar-item-bottom">其他</div>
            </div>
        </section>

        <section class="bottom">
            <div class="bottom-con">
                <div class="bottom-mid">
                    <div class="arrow-left"></div>
                    <div class="bottom-mid__text">
                        <span style="font-size: 28px;">总览</span>
                        <span class="small-light-blue">ZONGLAN</span> 
                    </div>
                    <div class="arrow-right"></div>
                </div>
                <div class="bottom-l">
                    <span class="btn-menu">申报情况</span>
                    <span class="btn-menu">跟踪情况</span>
                </div>
                <div class="bottom-r">
                    <span class="btn-menu">企业发展情况</span>
                    <span class="btn-menu">管理预警</span>
                </div>
            </div>
    </section>
    
    </section>
    
    <div class="dialog-mask" id="dialog-mask"></div>
    <section class="dialog" id="dialog">
        <div class="dialog-head">
            名称
            <i class="dialog-close"></i>
        </div>
        <div class="dialog-content">
            <div class="chart-item">
                <div class="pie flex-v">
                    <div class='pie-title'>
                        科技创新领域
                        <span class="pie-title-value">
                                234452
                                <label class="unit">项</label>
                            </span>
                    </div>
                    <div class="pie-content flex1" id="dialogPie1"></div>
                </div>
                <div class="bar" id="dialogBar1"></div>
            </div>
            <div class="chart-item">
                <div class="pie flex-v">
                    <div class='pie-title'>
                        科技创新领域
                        <span class="pie-title-value">
                                234452
                                <label class="unit">项</label>
                            </span>
                    </div>
                    <div class="pie-content flex1" id="dialogPie2"></div>
                </div>
                <div class="bar" id="dialogBar2"></div>
            </div>
            <div class="chart-item">
                <div class="pie flex-v">
                    <div class='pie-title'>
                        科技创新领域
                        <span class="pie-title-value">
                                234452
                                <label class="unit">项</label>
                            </span>
                    </div>
                    <div class="pie-content flex1" id="dialogPie3"></div>
                </div>
                <div class="bar" id="dialogBar3"></div>
            </div>
        </div>

    </section>
</section>
</body>
<script>
    init()
</script>
</html>
